<template>
  <div>
    <div class="flex-line">
      <form-box ref="searchForm" class="flex-1" :fields="searchField" :is-filter="true" :submit-handle="searchHandle" />
      <el-button type="primary" size="large" round style="height:39px" @click="exportFun">导出</el-button>
    </div>

    <el-table v-loading="loading" :data="list" style="width: 100%" class="table-empty">
      <template v-for="(item,index) in desCol">
        <el-table-column v-if="item.label=='收费项目' && item.items.length>0" :key="index" label="收费项目" width="120">
          <el-table-column v-for="item2 in item.items" :key="item2.productId" :prop="item2.prop" :label="item2.label" />
        </el-table-column>
        <el-table-column v-else :key="index" :prop="item.prop" :label="item.label" :fixed="item.fixed" />
      </template>
    </el-table>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getPayInAndOut, exportRequest } from './api'
import { getClassesByArea } from '@/api/common'
import { getMonthFirst, getMonthLast } from '@/utils/date'
export default {
  name: 'FinanceReport',
  data () {
    return {
      loading: false,
      pagination: {
        total: 0,
        pageSize: 99,
        pageNum: 1
      },
      list: [],
      desCol: [
        { prop: 'childName', label: '姓名', fixed: 'left' },
        { prop: 'className', label: '班级', fixed: 'left' },
        { prop: 'address', label: '收费项目', items: [] },
        { prop: 'fullRecharge', label: '收费合计', fixed: 'right' },
        { prop: 'returnAmount', label: '退费合计', fixed: 'right' },
        { prop: 'total', label: '总计(收费-退费)', fixed: 'right' }
      ],
      filter: {},
      classes: [],
      classId: '',
      beginDate: getMonthFirst(new Date()),
      endDate: getMonthLast(new Date())
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchField () {
      const { classId } = this
      const beginAt = getMonthFirst(new Date())
      const endAt = getMonthLast(new Date())
      return [
        {
          key: 'classId',
          label: '班级名称',
          type: 'select',
          initialValue: classId,
          rules: [{ required: true, message: '请先选择班级' }],
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          }
        },
        {
          key: 'date',
          label: '日期',
          type: 'daterange',
          key1: 'beginDate',
          key2: 'endDate',
          formatStr: 'YYYY-MM-DD',
          rules: [{ required: true, message: '请先选择日期范围' }],
          initialValue: [beginAt, endAt],
          fieldProps: {
            pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick (picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近一个月',
                onClick (picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近三个月',
                onClick (picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                  picker.$emit('pick', [start, end])
                }
              }]
            }
          }
        }
      ]
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    searchHandle (values) {
      this.pagination.pageNum = 1
      this.pagination.total = 0
      this.beginDate = values.beginDate
      this.endDate = values.endDate
      this.classId = values.classId
      this.filter = {
        ...values
      }
      this.getList()
    },
    getList () {
      this.loading = true
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize,
        ...this.filter
      }
      getPayInAndOut(prams).then(res => {
        const decItems = []
        res.content.map((item, index) => {
          if (item.items.length > 0) {
            item.items.map(item2 => {
              if (index === 0) {
                const obj = { prop: item2.productId, label: item2.productName }
                decItems.push(obj)
              }
              item[`${item2.productId}`] = item2.amount
            })
          }
        })
        this.desCol.map(item => {
          if (item.label === '收费项目') {
            item.items = decItems
          }
        })
        this.list = res.content
        this.pagination.total = res.totalElements
      }).finally(() => {
        this.loading = false
      })
    },
    exportFun () {
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize,
        classId: this.classId,
        beginDate: this.beginDate,
        endDate: this.endDate
      }
      exportRequest(prams).then(res => {
        console.log(res)
        window.location.href = res
      })
    },
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
      this.classChange(this.classes[0] ? this.classes[0].id : '')
    },
    // 选择班级
    classChange (val) {
      this.classId = val
    }
  }
}
</script>
<style lang="scss" scoped>
.table-operator {
  margin-bottom: 18px;
}

.tabTypes {
  margin-bottom: 30px;
}
::v-deep {
  .tableWrapper {
    padding: 0;
  }
}
</style>
